<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>酒店官网</title>
		<link rel="stylesheet" href="../style/base.css" />
		<link rel="stylesheet" href="../style/index.css" />
		<link rel="stylesheet" href="../style/font-awesome.css" />
	</head>
	1920 1080
	1440 960
	1024 760
	<body>
		<div id="box">

			<div class="top">
				<div class="top-left fl">
					<i class="fa fa-clock-o"></i>
					<span>Mon - Sat 8.00 - 18.00. Sunday CLOSED</span>
				</div>
				<div class="top-right fr">
					<i class="fa fa-phone"></i>
					<span>Tel No. (+001) 123-456-789</span>
				</div>
			</div>

			<div class="nav">
				<div class="nav-logo">
					<img src="../img/logo.png" />
				</div>
				<div class="nav-right">
					<ul>
						<li>
							<a href="javascript:;">home</a>
						</li>
						<li>
							<a href="javascript:;">home</a>
						</li>
						<li>
							<a href="javascript:;">home</a>
						</li>
						<li>
							<a href="javascript:;">home</a>
						</li>
						<li>
							<a href="javascript:;">home</a>
						</li>
						<li>
							<a href="javascript:;">home</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="carouserl">
				<img src="../img/slides/1.jpg">
			</div>
			<div class="container">
				<div class="nav-list">
					<ul>
						<li>
							<div class="nav-content">
								<div class="context-icon">
									<i class="fa fa-home"></i>
								</div>
								<div class="context-words">
									<h4>NEW PROJECTS</h4>
									<p>Lorem ipsum dolor sitamet, consec
										tetur adipisicing elit. Dolores quae
										porro consequatur aliquam, incidunt eius magni provident</p>
								</div>
							</div>
						</li>
						<li>
							<div class="nav-content">
								<div class="context-icon">
									<i class="fa fa-home"></i>
								</div>
								<div class="context-words">
									<h4>NEW PROJECTS</h4>
									<p>Lorem ipsum dolor sitamet, consec
										tetur adipisicing elit. Dolores quae
										porro consequatur aliquam, incidunt eius magni provident</p>
								</div>
							</div>
						</li>
						<li>
							<div class="nav-content">
								<div class="context-icon">
									<i class="fa fa-home"></i>
								</div>
								<div class="context-words">
									<h4>NEW PROJECTS</h4>
									<p>Lorem ipsum dolor sitamet, consec
										tetur adipisicing elit. Dolores quae
										porro consequatur aliquam, incidunt eius magni provident</p>
								</div>
							</div>
						</li>
						<li>
							<div class="nav-content">
								<div class="context-icon">
									<i class="fa fa-home"></i>
								</div>
								<div class="context-words">
									<h4>NEW PROJECTS</h4>
									<p>Lorem ipsum dolor sitamet, consec
										tetur adipisicing elit. Dolores quae
										porro consequatur aliquam, incidunt eius magni provident</p>
								</div>
							</div>
						</li>

					</ul>
				</div>
				<div class="box-hotel">
					<div class="box-title">
						<h2><span>RECENT</span>PROPERTIES</h2>
						<p class="box-title-memo">
							Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada Pellentesque

							ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat.
						</p>
					</div>
					<div class="box-content">
						<div class="hotel-item fl">
							<img class="hotel-item-img" src="../img/img1.jpg" />
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
								consequatur aliquam, incidunt eius magni providentassdasdasdasdasdasdasdassdasdasdasdasdasdasdasdadasd
							</p>
						</div>
						<div class="hotel-item fl"><img class="hotel-item-img" src="../img/img1.jpg" />
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
								consequatur aliquam, incidunt eius magni provident
							</p>
						</div>
						<div class="hotel-item fl"><img class="hotel-item-img" src="../img/img1.jpg" />
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
								consequatur aliquam, incidunt eius magni provident
							</p>
						</div>
						<div class="hotel-item fl"><img class="hotel-item-img" src="../img/img1.jpg" />
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
								consequatur aliquam, incidunt eius magni provident
							</p>
						</div>
						<div class="hotel-item fl"><img class="hotel-item-img" src="../img/img1.jpg" />
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
								consequatur aliquam, incidunt eius magni provident
							</p>
						</div>
						<div class="hotel-item fl"><img class="hotel-item-img" src="../img/img1.jpg" />
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
								consequatur aliquam, incidunt eius magni provident
							</p>
						</div>
						<div class="hotel-item fl"><img class="hotel-item-img" src="../img/img1.jpg" />
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
								consequatur aliquam, incidunt eius magni provident
							</p>
						</div>
						<div class="hotel-item fl"><img class="hotel-item-img" src="../img/img1.jpg" />
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
								consequatur aliquam, incidunt eius magni provident
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="container bg-gray">
					<div class="box-hotel pd">
					<div class="box-title">
						<h2><span>RECENT</span>PROPERTIES</h2>
						<p class="box-title-memo">
							Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada Pellentesque
				
							ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat.
						</p>
					</div>
					<div class="box-content">
							<div class="hotel-item fl big">
								<img class="hotel-item-img" src="../img/img3.jpg" />
								<h4 class="hotel-item-title">Apartments</h4>
								<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
									consequatur aliquam, incidunt eius magni providentassdasdasdasdasdasdasdassdasdasdasdasdasdasdasdadasd
								</p>
						</div>
						<div class="hotel-item fl big">
								<img class="hotel-item-img" src="../img/img2.jpg" />
								<h4 class="hotel-item-title">Apartments</h4>
								<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
									consequatur aliquam, incidunt eius magni providentassdasdasdasdasdasdasdassdasdasdasdasdasdasdasdadasd
								</p>
						</div>
						<div class="hotel-item fl big">
								<img class="hotel-item-img" src="../img/img1.jpg" />
								<h4 class="hotel-item-title">Apartments</h4>
								<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
									consequatur aliquam, incidunt eius magni providentassdasdasdasdasdasdasdassdasdasdasdasdasdasdasdadasd
								</p>
						</div>
						<div class="hotel-item fl big">
								<img class="hotel-item-img" src="../img/img4.jpg" />
								<h4 class="hotel-item-title">Apartments</h4>
								<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
									consequatur aliquam, incidunt eius magni providentassdasdasdasdasdasdasdassdasdasdasdasdasdasdasdadasd
								</p>
						</div>
						<div class="hotel-item fl big">
								<img class="hotel-item-img" src="../img/img5.jpg" />
								<h4 class="hotel-item-title">Apartments</h4>
								<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
									consequatur aliquam, incidunt eius magni providentassdasdasdasdasdasdasdassdasdasdasdasdasdasdasdadasd
								</p>
						</div>
						<div class="hotel-item fl big">
								<img class="hotel-item-img" src="../img/img6.jpg" />
								<h4 class="hotel-item-title">Apartments</h4>
								<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
									consequatur aliquam, incidunt eius magni providentassdasdasdasdasdasdasdassdasdasdasdasdasdasdasdadasd
								</p>
						</div>
						
						</div>
					</div>
					</div>
						<div class="container">
						<div class="box-hotel pd">
							<div class="box-title">
								<h2><span>RECENT</span>PROPERTIES</h2>
								<p class="box-title-memo">
									Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada Pellentesque
									ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat.
								</p>
							</div>
							<div class="box-content">
								<div class="box-content-left fl">
									<p class="title">Grids is a responsive Multipurpose Template. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
									<ul class="option"> 
											<li><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</li>
											<li><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</li>
											<li><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</li>
											<li><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</li>
									</ul>
									<div class="btns">
										<button class="defult-btn">Learn More</button>
									</div>
								</div>
								<div class="box-content-right fl">
									<img src="../img/about.jpg" />
								</div>
							</div>
						</div>
								
							</div>
							
							<div class="container bg-black mg">
								<div class="box-bottom">
									<ul>
										<li>
											<h4>Our Contact</h4>
											<p><a href="#">Latest EventsLatest EventsLatest EventsLatest Events</a></p>
											<p><a href="#">Latest Events</a></p>
											<p><a href="#">Latest Events</a></p>
											<p><a href="#">Latest Events</a></p>
										</li>
										<li>
											<h4>Our Contact</h4>
											<p><a href="#">Latest Events</a></p>
											<p><a href="#">Latest Events</a></p>
											<p><a href="#">Latest Events</a></p>
											<p><a href="#">Latest Events</a></p>
										</li>
										<li>
											<h4>Our Contact</h4>
											<p><a href="#">Latest Events</a></p>
											<p><a href="#">Latest Events</a></p>
											<p><a href="#">Latest Events</a></p>
											<p><a href="#">Latest Events</a></p>
										</li>
										<li>
											<h4>Our Contact</h4>
											<p><a href="#">Latest Events</a></p>
											<p><a href="#">Latest Events</a></p>
											<p><a href="#">Latest Events</a></p>
											<p><a href="#">Latest Events</a></p>
										</li>
										
									</ul>
									<div class="font fl">
										<p class="font-copyright fl">Copyright  2017.Company name All rights reserved</p>
										<div class="foot-icons fr">
											
												
													<i class="fa fa-facebook"></i>
													<i class="fa fa-facebook"></i>
													<i class="fa fa-facebook"></i>
													<i class="fa fa-facebook"></i>
													
												
												
											
										</div>
									</div>
									
								</div>
								
							</div>
			</div>
		
		<script src="../js/index.js">

		</script>
	</body>
</html>
